<template>
  <div>
    <a-card title="结业换证成绩录入设置">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="成绩录入开始时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <a-date-picker
            v-decorator="['startTime', { rules: [{ required: true, message: '请选择开始时间' }] }]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item label="成绩录入结束时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <a-date-picker
            v-decorator="['endTime', { rules: [{ required: true, message: '请选择结束时间' }] }]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item label="成绩录入教师" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <a-select
            mode="multiple"
            v-decorator="['teachers', { rules: [{ required: true, message: '请选择教师' }] }]"
            placeholder="选择可录入成绩的教师"
          >
            <a-select-option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id">
              {{ teacher.name }} ({{ teacher.code }})
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
          <a-button type="primary" html-type="submit">保存设置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    
    <a-card title="当前成绩录入设置" style="margin-top: 20px">
      <a-table :columns="settingColumns" :dataSource="settingData" :pagination="false">
        <template slot="teachers" slot-scope="text">
          <a-tag v-for="teacher in text" :key="teacher.id">
            {{ teacher.name }}
          </a-tag>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a @click="editSetting(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="deleteSetting(record)">删除</a>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const settingColumns = [
  {
    title: '学期',
    dataIndex: 'semester',
    key: 'semester'
  },
  {
    title: '录入时间',
    dataIndex: 'timeRange',
    key: 'timeRange'
  },
  {
    title: '可录入教师',
    key: 'teachers',
    scopedSlots: { customRender: 'teachers' }
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

const teachers = [
  { id: 'T001', name: '李娜', code: 'L001' },
  { id: 'T002', name: '王教授', code: 'W002' },
  { id: 'T003', name: '李红梅', code: 'Z003' },
  { id: 'T004', name: '刘教授', code: 'L004' }
]

export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      settingColumns,
      teachers,
      settingData: [
        {
          key: '1',
          semester: '2022-2023学年第二学期',
          timeRange: '2023-06-01 08:00:00 至 2023-06-15 17:00:00',
          teachers: [teachers[0], teachers[1]]
        },
        {
          key: '2',
          semester: '2022-2023学年第一学期',
          timeRange: '2022-12-01 08:00:00 至 2022-12-15 17:00:00',
          teachers: [teachers[2], teachers[3]]
        }
      ]
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          this.$message.success('成绩录入设置保存成功')
        }
      })
    },
    editSetting(record) {
      console.log('编辑:', record)
      // 这里应该解析时间范围并设置表单值
      this.form.setFieldsValue({
        teachers: record.teachers.map(t => t.id)
      })
    },
    deleteSetting(record) {
      this.$confirm({
        title: '确认删除这条成绩录入设置吗?',
        content: '删除后将无法恢复',
        onOk: () => {
          this.settingData = this.settingData.filter(item => item.key !== record.key)
          this.$message.success('删除成功')
        }
      })
    }
  }
}
</script>